<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8" />

        <title>后台工具</title>

        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="css/common.css" />
        <link rel="stylesheet" href="css/manageAds.css" />

    </head>

    <body>
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <a class="brand" href="#">广告SDK<em class="f-fs14">&nbsp;&nbsp;1.2.1</em></a>
                    <div class="nav-collapse collapse navbar-responsive-collapse">
                        <ul class="nav pull-right">
                            <li class="divider-vertical"></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">admin <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a href="#">退出</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div><!-- /.nav-collapse -->
                </div>
            </div><!-- /navbar-inner -->
        </div>

        <div id="container" class="container-fluid">
            <div class="row-fluid">

                <div class="span3">
                    <ul class="nav nav-pills nav-stacked">
                        <li class="active single">
                            <a href="#help">广告SDK管理</a>
                        </li>
                    </ul>
                </div><!-- span3 -->

                <div class="span9">
                    <ul class="breadcrumb">
                        <li>
                            <a href="index.html">app助手</a><span class="divider">></span>
                        </li>
                        <li class="active">
                            Data
                        </li>
                    </ul>
                    <ul id="myNav" class="nav nav-tabs">
                        <li class="active">
                            <a id="online" href="#">在线中</a>
                        </li>
                        <li>
                            <a id="readyToOnline" href="#">待上线</a>
                        </li>
                        <li>
                            <a id="offline" href="#">已下线</a>
                        </li>
                    </ul>
                    <pre id="stats">当前共有0个广告</pre>
                    <a id="addAdButton" class="btn" role="button">添加广告</a>
                    <a id="adjustButton" class="btn" role="button">调整顺序</a>
                    <button id="button2">
                    show
                    </button> 
                    <table id="adTable" class="table table-bordered table-hover" >
                        <colgroup>
                            <col width="8%">
                            <col width="20%">
                            <col width="10%">
                            <col width="20%">
                            <col width="12%">
                            <col width="30%">
                        </colgroup>
                        <thead>
                            <tr>
                                <th>序号</th>
                                <th>广告名称</th>
                                <th>广告形式</th>
                                <th>上线时间</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>

            <div class="modal hide fade" id="selectAdTypeModal">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h3>请选择添加广告的形式</h3>
                </div>
                <div class="modal-body"  >
                    <div class="btn-group" data-toggle="buttons-radio" style="margin:50px 0px 50px 100px;">
                        <button class="btn btn-large">
                            通栏广告
                        </button>
                        <button class="btn btn-large">
                            插屏广告
                        </button>
                        <button class="btn btn-large">
                            开屏广告
                        </button>
                    </div>

                </div>
                <div class="modal-footer">
                    <a href="#" class="btn btn-primary">确定</a>
                    <a href="#" class="btn" data-dismiss="modal" aria-hidden="true">取消</a>
                </div>
            </div>
            
            <div class="modal hide fade" id="deleteConfirmModal">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                </div>
                <div class="modal-body">
                    是否删除
                </div>
                <div class="modal-footer">
                    <a href="#" class="btn btn-primary">确定</a>
                    <a href="#" class="btn" data-dismiss="modal" aria-hidden="true">取消</a>
                </div>
            </div>            

        </div>

        <script src="js/jquery-2.0.0.min.js" ></script>
        <script src="js/underscore.js"></script>
        <script src="js/backbone.js"></script>
        <script src="js/bootstrap.min.js"></script>

        <script src="js/common.js"></script>
        <script src="js/manageAds.js"></script>

        <script type="text/template" id="adTable_tr_template">
            <td><%= order %></td>
            <td><%= name %></td>
            <td><%= form %></td>
            <td><%= startTime %></td>
            <td><%= status %></td>
            <td>
            <a class="btn edit">
            编辑
            </a>
            
            <% if (status == "在线中") {%>
                <a class="btn offline">
                下线
                </a>       
            <% }else{ %>
                <a class="btn online">
                上线
                </a>               
            <% } %>     
                 
            <a class="btn delete">
            删除
            </a></td>            
        </script>

        <script type="text/template" id="stats-template">
            当前共有<%= count %>个广告
        </script>

    </body>

</html>